<template>
  <div class="hospital-card">
    <div class="card-content">
      <h2 class="title">{{ row.placesName }}</h2>
      <div class="info-item">
        <span class="label">医院地址：</span>
        <span class="value">{{ row.placesAddr }}</span>
      </div>
      <div class="info-item">
        <span class="label">联系电话：</span>
        <span class="value">{{ row.placesPhone }}</span>
      </div>
    </div>
    <van-button round type="primary" class="hang-btn" @click="toPage(row)">
      挂号
    </van-button>
  </div>
</template>

<script>
import { toMiniProgram } from '../../../utils/utils'
export default {
  name: 'HospitalCard',
  props: {
    row: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },
  methods: {
    toPage(row) {
      if (row.jumpUrl.indexOf('@@') >= 0) {
        const [appid, path] = row.jumpUrl.split('@@')
        toMiniProgram(appid, path)
      } else {
        this.$toPage(
          `/pages/share/qrcode?qrcode=${row.qrcode}&link=${row.jumpUrl}`
        )
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.hospital-card {
  background: $uni-color-success;
  border-radius: 8px;
  padding: 16px;
  position: relative;
  margin-bottom: 10px;
  .card-content {
    .title {
      font-size: 20px;
      color: $uni-color-primary;
      font-weight: bold;
      margin-bottom: 14px;
    }

    .info-item {
      margin-bottom: 10px;
      font-size: 15px;
      line-height: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: #333;
      }

      .value {
        color: #333;
      }
    }
  }

  .hang-btn {
    position: absolute;
    right: 20px;
    width: 60px;
    height: 32px;
    font-size: 14px;
    bottom: 10px;
  }
}
</style>
